<script lang="ts" setup>
import { ref } from 'vue'
import tmWaterfall from '@/tmui/components/tm-waterfall/tm-waterfall.vue'

const wall = ref<InstanceType<typeof tmWaterfall> | null>(null)
const imglist = ref([
  {
    img: 'https://gw.alicdn.com/bao/uploaded/i2/1848622920/O1CN018zBHJ91XRPJ4bHW78_!!0-item_pic.jpg_320x320q90.jpg',
    text: '杨大爷麻辣香肠腊肠500克四川特产烟熏肉农家自制川味烤腊肉辣肠',
    price: '49',
    num: '3000+人购买',
  },
  {
    img: 'https://gw.alicdn.com/imgextra/i4/2207613550143/O1CN01hPpOvy1CvXQdlZLeC_!!2207613550143-0-alimamacc.jpg_q90.jpg',
    text: '',
    price: '200',
    num: '3000+人购买',
  },
  {
    img: 'https://gw.alicdn.com/bao/uploaded/i4/14498052/O1CN01pa6ScB29LrgfkRp8V_!!14498052.jpg_320x320q90.jpg',
    text: '带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套',
    price: '12.8',
    num: '1500+人购买',
  },
  {
    img: 'https://gw.alicdn.com/bao/uploaded/i4/14498052/O1CN01pa6ScB29LrgfkRp8V_!!14498052.jpg_320x320q90.jpg',
    text: '带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套',
    price: '12.8',
    num: '1500+人购买',
  },
  {
    img: 'https://gw.alicdn.com/bao/uploaded/i4/1026973813/O1CN014Kirba1e2OrHg7gwN_!!1026973813.jpg_320x320q90.jpg',
    text: '带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套',
    price: '12.8',
    num: '1500+人购买',
  },
  {
    img: 'https://gw.alicdn.com/imgextra/i3/23844911/O1CN01N1UxMS1m9Hs6gGu6E_!!23844911-0-alimamacc.jpg',
    text: '',
    price: '200',
    num: '3000+人购买',
  },
  {
    img: 'https://gw.alicdn.com/bao/uploaded/i4/2418392409/O1CN01zT4JbA1TfMoU30Uub_!!2418392409.jpg_320x320q90.jpg',
    text: '50枚挂耳咖啡滤袋日本材质手冲咖啡滤纸咖啡粉滤袋挂耳咖啡袋包邮',
    price: '12.8',
    num: '1500+人购买',
  },
  {
    img: 'https://gw.alicdn.com/bao/uploaded/i2/6000000001207/O1CN016TztFg1Kmqqrtarb0_!!6000000001207-0-picassoopen.jpg_320x320q90.jpg',
    text: '带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套',
    price: '12.8',
    num: '1500+人购买',
  },
  {
    img: 'https://gw.alicdn.com/bao/uploaded/i3/2200531292142/O1CN01gFUdOw1Rh4vjN44sB_!!0-item_pic.jpg_320x320q90.jpg',
    text: '带盖 酸奶杯一次性塑料布丁杯胖胖pp果冻杯慕斯甜品杯双皮奶100套',
    price: '12.8',
    num: '1500+人购买',
  },
])
</script>

<template>
  <tm-app>
    <view class="flex flex-col flex-col-top-center">
      <tm-waterfall ref="wall" :width="718">
        <tm-waterfall-item v-for="(item, index) in imglist" :key="index" :img="item.img">
          <view class="pt-12 pb-12 px-12">
            <tm-text :label="item.text" _class="text-overflow-2" />
            <view class="flex flex-row flex-row-bottom-start mt-24">
              <tm-text color="orange" :font-size="24" label="¥" />
              <tm-text color="orange" _class="px-10" :font-size="36" :label="item.price" />
              <tm-text color="grey" :font-size="24" :label="item.num" />
            </view>
          </view>
        </tm-waterfall-item>
      </tm-waterfall>
    </view>
  </tm-app>
</template>
